<!--
 * new page
 * @author: YK
 * @since: 2024-01-10
 * index.vue
-->
<template>
  <el-progress v-bind="$attrs" :percentage="p"></el-progress>
</template>

<script setup lang="ts">
import {onMounted,ref} from "vue";
const props= withDefaults(
  defineProps<{
    percentage: number;
    isAnimation: boolean; //是否有动画效果
    time:number; //动画时间(毫秒)
  }>(),
  { percentage: 0, isAnimation: false,time:3000 }
);
const p=ref(0)
onMounted(()=>{
  if(props.isAnimation){
    //规定时间内加载完成
    let t=Math.ceil(props.time/props.percentage)
   let timer= setInterval(()=>{
      p.value+=1
      if(p.value>=props.percentage){
        p.value=props.percentage
        clearInterval(timer)
      }
    },t)
  }else{
    p.value=props.percentage
  }
})
</script>

<style scoped lang="scss"></style>
